<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set> 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>库存商品列表</title>

    <link rel="shortcut icon" href="${ctx}/favicon.ico"> <link href="${ctx}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${ctx}/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="${ctx}/css/animate.css" rel="stylesheet">
    <link href="${ctx}/css/style.css?v=4.1.0" rel="stylesheet">
</head>

<body>
        <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">                       
                        <div class="ibox-content">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div >
                                            <label style="float: left;text-align:left;font-size:18px;font-weight:normal;margin-left:10px;">每页 
                                                <select id="pageSizeSelect" onchange="choosePageSize(this.value)">
                                                    <option value="5">5</option>
                                                    <option value="10">10</option>
                                                    <option value="15">15</option>
                                                    <option value="20">20</option>
                                                </select>
                                                 条记录
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-sm-6" style="text-align:right;">
                                        <div style="text-align:right">
                                            <label style="float:right;font-size:18px;font-weight:normal;margin-right:10px;">查找：
                                                <input type="search"placeholder="请输入关键词" name="values">
                                                <span class="btn btn-sm btn-primary" onclick="searchInfo()">搜索</span>
                                                <span class="btn btn-sm btn-primary" onclick="outGoodsInfo()">导出</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            <div class="table-responsive" >
                                <table class="table table-striped">
                                    <thead>
                                    <tr>
                                        <th>编号</th>
                                        <th>商品名称</th>
                                        <th>总数量</th>
                                        <th>规格</th>
                                        <th>总金额</th>
                                        <th>体积</th>
                                        <th>仓库</th>
                                        <th>备注</th>
                                        <th style="width:80px;">更改仓库</th>
                                        <th style="width:80px;">添加备注</th>
                                        <th style="width:80px;">添加体积</th>
                                    </tr>
                                    </thead>
                                    <tbody id="goods" >
                                    <%-- <c:forEach var="goods" items="${goodsList}">
                                    <tr>  
                                        <td>${goods.h_goods_id}</td>
                                        <td>${goods.goods_name}</td>
                                        <td>${goods.number}</td>
                                        <td>${goods.unit}</td>
                                        <td>${goods.sum}元</td>
                                        <td>${goods.volume}</td>
                                        <td>${goods.storehouse_name}</td>
                                        <td>${goods.remark}</td>
                                        <td><a class="btn btn-primary btn-rounded" onclick="updateStorehouse()">更改仓库</a></td>
                                        <td><a class="btn btn-primary btn-rounded" onclick="addRemark()">添加备注</a></td>
                                        <td><a class="btn btn-primary btn-rounded" onclick="addVolume()">添加体积</a></td>
                                    </tr>
                                    </c:forEach> --%>
                                    </tbody>
                                </table>
                            </div>
                            <div id="page" style="text-align:right;">
                                    
                            </div> 
                        </div>
                    </div>
                </div>
        
        </div>
</body>
<!-- 全局js -->
<script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${ctx}/dist\layer-v3.1.1\layer\layer.js"></script>
<script src="${ctx}/dist/jquery-bootstrap-pagination/jquery-bootstrap-pagination.js"></script>
<script>
	loadData(1); 
	function loadData(pageNum){	
		$('#page').html('<div style="text-align:right"></div>');
		$.get('${ctx}/HouseGoodsServlet/houseGoodsList',{'pageSize':$('#pageSizeSelect').val(),'pageNum':pageNum},function(data){
			format(data['houseGoodsList']);
			//alert(data['pageCount']+'/'+data['pageNum']);
			$("#page").children('div').pagination({
				  total_pages:data['pageCount'],
				  current_page:data['pageNum'],
				  prev: "上一页",
				  next: "下一页",
				  display_max:4,
				  callback: function(event,page) {
				      updateTable(page);
				}
				});  
		},'json');	
	}
	//更新表格数据
	function updateTable(pageNum){	
		$.get('${ctx}/HouseGoodsServlet/houseGoodsList',{'pageSize':$('#pageSizeSelect').val(),'pageNum':pageNum},function(data){	
			format(data['houseGoodsList']);
		},'json');
	}
	//格式化数组，将数组加到表格
	function format(data){
		//清空tbody
		$('#goods').empty();
		for(i in data){
			var obj = $('<tr>').append('<td>'+data[i]['h_goods_id']+'</td>');
			 obj =  obj.append('<td><a onclick="getGooodsId('+data[i]['h_goods_id']+')">'+data[i]['goods_name']+'</a></td>');
			 obj = obj.append('<td>'+data[i]['number']+'</td>');			 
			 obj = obj.append('<td>'+data[i]['unit']+'</td>');
			 obj = obj.append('<td>'+data[i]['sum']+'元</td>');
			 obj = obj.append('<td>'+data[i]['volume']+'立方米</td>');
			 obj = obj.append('<td>'+data[i]['storehouse_name']+'</td>');
			 obj = obj.append('<td>'+data[i]['remark']+'</td>');
			 obj = obj.append('<td><a class="btn btn-primary btn-rounded" onclick="updateStorehouse('+data[i]['h_goods_id']+')">更改仓库</a></td>');
			 obj = obj.append('<td><a class="btn btn-primary btn-rounded" onclick="addRemark('+data[i]['h_goods_id']+')">添加备注</a></td>');
			 obj = obj.append('<td><a class="btn btn-primary btn-rounded" onclick="addVolume('+data[i]['h_goods_id']+')">添加体积</a></td>');
			 obj = obj.append('</tr>');
			$('#goods').append(obj);
		}
	}
  
    //选择每页大小
    function choosePageSize(pageSize){
    	$('#page').html('<div style="text-align:right"></div>');
    	$.get('${ctx}/HouseGoodsServlet/houseGoodsList',{'pageSize':pageSize,'pageNum':1},function(data){
			format(data['houseGoodsList']);
			
			$("#page").children('div').pagination({
				  total_pages:data['pageCount'],
				  current_page:data['pageNum'],
				  prev: "上一页",
				  next: "下一页",
				  display_max:4,
				  callback: function(event,page) {
				      updateTable(page);
				}
				});  
		},'json');	
    }
    //查找
    function searchInfo(){
        search=$('[name=values]').val();
        
        $.get('${ctx}/HouseGoodsServlet/houseGoodsSerarchList',{'pageSize':$('#pageSizeSelect').val(),'pageNum':1,'search':search},function(data){
			format(data['houseGoodsList']);
			
			$("#page").children('div').pagination({
				  total_pages:data['pageCount'],
				  current_page:data['pageNum'],
				  prev: "上一页",
				  next: "下一页",
				  display_max:4,
				  callback: function(event,page) {
					  updateTabelSearch(page)
				}
				});  
		},'json');	
    }
    function updateTabelSearch(page){
    	$.get('${ctx}/HouseGoodsServlet/houseGoodsSerarchList',{'pageSize':$('#pageSizeSelect').val(),'pageNum':page,'search':$('[name=values]').val()},function(data){	
			format(data['houseGoodsList']);
		},'json');
    }
    //更改仓库
    function updateStorehouse(h_goods_id){
        //layer.msg("选一个仓库改了"+h_goods_id);
        layer.open({
 			type:2,
 			content:['${ctx}/HouseGoodsServlet/updateStorehouse?h_goods_id='+h_goods_id,'no'],
 			area:['40%','26%'],
 			
 		});
    };
    //添加备注
    function addRemark(h_goods_id){
    	//prompt层
    	layer.prompt({title: '为编号'+h_goods_id+'添加备注：', formType: 2}, function(remark, index){
    	    layer.close(index);
    	  	$.get('${ctx}/HouseGoodsServlet/addRemark',{'h_goods_id':h_goods_id,'remark':remark},function(data){
    	  		if(data){
    	  			parent.layer.msg("添加备注成功");
    	  			window.location.reload();//刷新父页面
    	  		}else{
    	  			layer.msg("添加备注失败");
    	  		}
    	  	});
             	  
    	});
    }
    //添加体积
    function addVolume(h_goods_id){
    	//prompt层
    	layer.prompt({title: '为编号'+h_goods_id+'添加体积：', formType: 0}, function(volume, index){
    		 layer.close(index);
    		 $.get('${ctx}/HouseGoodsServlet/addVolume',{'h_goods_id':h_goods_id,'volume':volume},function(data){
     	  		if(data){
     	  			parent.layer.msg("添加体积成功");
     	  			window.location.reload();//刷新本页面
     	  		}else{
     	  			layer.msg("添加体积失败");
     	  		}
     	  	});
    		
    	});
        
    }
    //点击商品名称时
    function getGooodsId(h_goods_id){
    	 var index = layer.open({
    		 	type:2,
    		 	content:['${ctx}/SingleGoodsServlet/preShowGoods?h_goods_id='+h_goods_id,'no'],
    		 	area:['40%','55%'],
    	        //area: ['320px', '195px'],
    	        maxmin: true
    		});
    	    layer.full(index);
    }
    
    function outGoodsInfo(){
    	//询问框
    	layer.confirm('确定要将库存商品导出到D盘Excel表格吗？', {
    	  btn: ['确定','取消'] //按钮
    	}, function(){
    		$.get('${ctx}/HouseGoodsServlet/outGoodsInfo','',function(data){
        		if(data){
        			layer.msg("已成功导出到D盘！");
        		}else{
        			layer.msg("导出失败");
        		}
        	});
    	}, function(){
    	  
    	});
    	
    }
    history.pushState(null,null,'${ctx}/page/user/goodsManage/StorehouseGoodsList.jsp');
</script>
</html>
</html>